{% extends 'layout.html' %}
{% block content %}
    <section id="main-content">
        <div class="row">

            <div class="col-lg-12">


                <div class="card">
                    <div class="">
                        <button type="button" class="btn btn-primary btn-flat btn-addon m-b-10 m-l-5"
                                data-target="#projectaddForm" data-toggle="modal"><i
                                class="ti-plus"></i>添加项目
                        </button>
                        <div class="col-md-3" style="float: right;top:-8px">
                            <form action="{% url 'projects:project_list' %}" method="get">
                                <div class="input-group">

                                    <input type="text" id="search_text" name="Search" class="form-control"
                                           placeholder="Search Round" style="border-radius:20px"
                                           value="{{ search_text }}">
                                    <span class="input-group-btn">
                                    <button class="btn btn-primary btn-group-right search_btn"
                                            type="submit"><i
                                            class="ti-search"></i></button></span>
                                </div>
                            </form>
                        </div>
                    </div>
                    {#列表#}
                    <div class="card-body">
                        <div class="table-responsive" style="text-align: center;">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>项目名称</th>
                                    <th>项目描述</th>
                                    <th>创建人</th>
                                    <th>创建时间</th>
                                    <th>项目状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for projects in obj_list.object_list %}
                                    <tr>
                                        <input type="hidden" value="{{ projects.id }}" id="project_id">
                                        <td id="project_name">{{ projects.name }}</td>
                                        <td id="project_describe">{{ projects.describe }}</td>
                                        <td id="project_creator">{{ projects.creator }}</td>
                                        <td class="color-primary">{{ projects.create_time }}</td>
                                        <td id="project_status">
                                            {% if projects.status %}
                                                <span class="badge badge-primary">运行中</span>

                                            {% else %}
                                                <span class="badge badge-danger">
                                                    已关闭</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="btn btn-info m-b-10 m-l-5"
                                                  onclick="project_edit(this, {{ projects.id }})"
                                                  data-target="#projecteditForm" data-toggle="modal">编辑</span>
                                            <span class="btn btn-dark m-b-10 m-l-5"
                                                  onclick="project_del({{ projects.id }})">删除</span>

                                        </td>
                                    </tr>
                                {% endfor %}


                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <!-- /# row -->
        <!-- Form Modal -->
        {#        添加对话框#}
        <div class="modal fade" id="projectaddForm" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalFormTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalFormTitle">添加项目</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="project_name">项目名称</label>
                                <input type="text" class="form-control" id="add_project_name" name="project_name"
                                       placeholder="请输入项目名称">
                            </div>

                            <div class="form-group">
                                <label for="project_describe">项目描述</label>
                                <textarea class="form-control" id="add_project_describe" name="project_describe"
                                          placeholder="请输入项目名称"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="project_creator">创建人</label>
                                <input type="text" class="form-control" id="add_project_creator" name="project_creator"
                                       placeholder="请输入创建人">
                            </div>
                            <div class="form-group">
                                <label for="project_status">项目状态</label>
                                <select id="add_project_status" class="form-control" name="project_status">
                                    <option>运行中</option>
                                    <option>已关闭</option>
                                </select>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">Close
                                </button>
                                <button type="button" class="btn btn-danger btn sweet-auto">
                                    Save Changes
                                </button>
                            </div>
                        </form>
                    </div>


                </div>
            </div>
        </div>
        {#       修改对话框#}
        <div class="modal fade" id="projecteditForm" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalFormTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalFormTitle">编辑项目</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <form>
                            {#                            {% csrf_token %}#}
                            <div class="form-group">
                                <input type="hidden" id="edit_project_id">
                                <label for="project_name">项目名称</label>
                                <input type="text" class="form-control" id="edit_project_name" name="project_name"
                                       placeholder="请输入项目名称">
                            </div>

                            <div class="form-group">
                                <label for="project_describe">项目描述</label>
                                <textarea class="form-control" id="edit_project_describe" name="project_describe"
                                          placeholder="请输入项目名称"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="project_creator">创建人</label>
                                <input type="text" class="form-control" id="edit_project_creator" name="project_creator"
                                       placeholder="请输入创建人">
                            </div>
                            <div class="form-group">
                                <label for="project_status">项目状态</label>
                                <select id="edit_project_status" class="form-control" name="project_status">
                                    <option>运行中</option>
                                    <option>已关闭</option>
                                </select>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">Close
                                </button>
                                <button type="button" class="btn btn-danger btn project_edit">
                                    Save Changes
                                </button>
                            </div>
                        </form>
                    </div>


                </div>
            </div>
        </div>

    </section>

{% endblock %}
{% block paginate %}
    <div class="dataTables_paginate paging_simple_numbers" id="expendable-data-table_paginate">
                            <ul class="pagination">

                                {% if  obj_list.has_previous %}
                                    <li class="paginate_button page-item previous "
                                        id="expendable-data-table_previous">
                                        <a href="?{{ obj_list.previous_page_number.querystring }}"
                                           aria-controls="expendable-data-table"
                                           data-dt-idx="0" tabindex="0"
                                           class="page-link">上一页</a>
                                    </li>
                                {% else %}
                                    <li class="paginate_button page-item disabled "
                                        id="expendable-data-table_previous">
                                        <a href="?{{ obj_list.previous_page_number.querystring }}"
                                           aria-controls="expendable-data-table"
                                           data-dt-idx="0" tabindex="0"
                                           class="page-link">上一页</a>
                                    </li>
                                {% endif %}
                                {% for page in obj_list.pages %}
                                    {% if page %}
                                        {% ifequal page obj_list.number %}
                                            <li class="paginate_button page-item active"><a
                                                    href="?{{ page.querystring }}"
                                                    aria-controls="expendable-data-table"
                                                    data-dt-idx="1" tabindex="0"
                                                    class="page-link">{{ page }}</a></li>
                                        {% else %}
                                            <li class="paginate_button page-item "><a href="?{{ page.querystring }}"
                                                                                      aria-controls="expendable-data-table"
                                                                                      data-dt-idx="2" tabindex="0"
                                                                                      class="page-link">{{ page }}</a>
                                            </li>
                                        {% endifequal %}
                                    {% else %}
                                        <li class="page-item"><a href="" class="page-link">...</a></li>
                                    {% endif %}
                                {% endfor %}

                                {% if obj_list.has_next %}
                                    <li class="paginate_button page-item next" id="expendable-data-table_next">
                                        <a href="?{{ obj_list.next_page_number.querystring }}"
                                           aria-controls="expendable-data-table"
                                           data-dt-idx="4" tabindex="0" class="page-link">下一页</a>
                                    </li>
                                {% else %}
                                    <li class="paginate_button page-item disabled" id="expendable-data-table_next">
                                        <a href="?{{ obj_list.next_page_number.querystring }}"
                                           aria-controls="expendable-data-table"
                                           data-dt-idx="4" tabindex="0" class="page-link">下一页</a>
                                    </li>
                                {% endif %}

                            </ul>
                        </div>
{% endblock %}
{% block js %}

    {#    编辑修改#}
    <script>
        document.querySelector(".project_edit").onclick = function () {
            var project_id = $('#edit_project_id').val();
            var project_name = $('#edit_project_name').val();
            var project_describe = $('#edit_project_describe').val();
            var project_creator = $('#edit_project_creator').val();
            var project_status = $('#edit_project_status').val();
            if (project_name !== '' && project_describe !== '' && project_creator != '') {
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "{% url 'projects:project_edit'%}",
                    data: {
                        'project_id': project_id,
                        'project_name': project_name,
                        'project_describe': project_describe,
                        'project_creator': project_creator,
                        'project_status': project_status
                    },
                    async: true,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (data) {
                        if (data.status) {
                            window.location.href = "{% url 'projects:project_list' %}";
                            swal({
                                title: '修改成功',
                                timer: 1000,
                                showConfirmButton: false,
                            });
                        } else {
                            swal(data.error_msg);
                        }
                    },
                })
            } else {
                swal({
                    title: '数据请填写完整',
                    timer: 1000,
                    showConfirmButton: false,
                });
            }

        }

    </script>
    {#    编辑弹框回显#}
    <script>
        function project_edit(obj, project_id) {
            var tr = $(obj).parent().parent()
            var project_name = tr.find('td#project_name').text()
            var project_describe = tr.find('td#project_describe').text()
            var project_creator = tr.find('td#project_creator').text()
            var project_status = tr.find('td#project_status').text()
            $("#edit_project_id").val(project_id)
            $("#edit_project_name").val(project_name)
            $("#edit_project_describe").val(project_describe)
            $("#edit_project_creator").val(project_creator)
            $('#edit_project_status option:selected').text(project_status);
            {#$("#edit_project_status option[value=" + project_status + "]").attr('selected', "selected");#}
        }

    </script>
    {#删除#}
    <script>
        function project_del(project_id) {
            swal(
                {
                    title: "Are you sure to delete ?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it !!",
                    cancelButtonText: "No, cancel it !!",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                },
                function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: "{% url 'projects:project_del' %}",
                            type: "POST",
                            data: {"project_id": project_id},
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                            },
                            success: function (data) {
                                if (data.status) {
                                    swal({
                                        title: '删除成功',
                                        timer: 1000,
                                        showConfirmButton: false,
                                    });
                                    window.location.reload();
                                }
                            }
                        })

                    } else {
                        swal({
                            title: "Sweet auto close alert !!",
                            timer: 0.5,
                            showConfirmButton: false,
                        });
                    }
                }
            );
        }

    </script>
    {#    添加#}
    <script>
        document.querySelector(".sweet-auto").onclick = function () {
            var project_name = $('#add_project_name').val();
            var project_describe = $('#add_project_describe').val();
            var project_creator = $('#add_project_creator').val();
            var project_status = $('#add_project_status').val();
            if (project_name !== '' && project_describe !== '' && project_creator != '') {
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "{% url 'projects:project_add'%}",
                    data: {
                        'project_name': project_name,
                        'project_describe': project_describe,
                        'project_creator': project_creator,
                        'project_status': project_status
                    },
                    async: true,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (data) {
                        if (data.status) {
                            window.location.href = "{% url 'projects:project_list' %}";
                        } else {
                            swal(data.error_msg);
                        }
                    },
                })
            } else {
                swal({
                    title: '数据请填写完整',
                    timer: 1000,
                    showConfirmButton: false,
                });
            }

        }

    </script>
{% endblock %}